<template>
	<view class="hotel-detail">
		<k-navbar title="酒店详情"></k-navbar>
		<view class="top-img">
			<image :src="img" mode="" style="width: 100%;heigth:373rpx"></image>
			<view class="num" @click="viewImg">{{detail.pictures? detail.pictures.length : 0}}张</view>
		</view>
		<view class="h-name">{{detail.hotelName}}</view>
		<view class="des">
			{{hotelStar[detail.hotelStar]}} |
			开业时间:{{detail.openDate || '暂无'}} |
			装修时间:{{detail.decorationDate || '暂无'}}
		</view>
		<view class="phone u-flex">
			<u-icon name="phone" color="#FF6600" size="30"></u-icon>{{detail.phone}}
		</view>
		<view class="map-box">
			<image src="../../static/hotel/map.png" style="height:71rpx;width: 100%;" mode=""></image>
			<view class="adress u-flex" @click="mapShow = true">
				<view class="u-flex-1 u-line-1">{{detail.address}}</view>
				<u-icon name="arrow-right" color="#000000" size="30"></u-icon>
			</view>
		</view>
		<u-tabs :list="list" :is-scroll="false" :current="current" active-color="#FF6600" @change="changeTab"></u-tabs>
		<view v-show="current == 0" class="h-list">
			<view class="date-panle" @click="showCalendar = true">
				<view class="item">
					<view class="date">{{checkInDateShow}}</view>
					<view class="des">入住日期</view>
				</view>
				<view class="item">
					<image src="../../static/hotel/date.png" style="width: 35rpx;height: 35rpx;" mode=""></image>
					<view class="des">共{{dayShow}}晚</view>
				</view>
				<view class="item">
					<view class="date">{{checkOutDateShow}}</view>
					<view class="des">离店日期</view>
				</view>
			</view>
			<view class="room-list">
				<view class="" v-for="(room, index) in roomList" :key="index">
					<view class="r-item u-flex" @click="showChild(room)">
						<view class="img-box">
							<u-image width="110rpx" height="110rpx" :src="room.showPic">
								<view slot="error" style="font-size: 24rpx;">暂无图片</view>
							</u-image>
						</view>
						<view class="u-flex-1">
							<view class="name">{{room.roomName}}</view>
							<view class="types">{{room.bedType}} | 可容纳{{room.capacity}}人 | {{room.useableArea}}</view>
						</view>
						<view class="price">￥{{room.floatMinPrice.actualDeductPrice}} <text style="font-size: 24rpx;">起</text> </view>
					</view>
					
					<view v-show="room.show" class="r-child" v-for="(child, indexChild) in room.ratePlans" :key="indexChild">
						<view class="r-c-item">
							<view class="u-flex">
								<view class="u-flex-1">{{child.ratePlanName}}</view>
								<view class="price">￥{{child.floatAveragePrice.actualDeductPrice}}</view>
							</view>
							<view class="u-flex" style="margin-top: 20rpx;">
								<view class="u-flex-1">
									<text class="btn">不可退订</text>
									<text class="btn">限时确认</text>
									<text class="or">原价：￥{{child.floatAveragePrice.floatPrice}}</text>
								</view>
								<u-button type="warning" shape="circle" size="mini" @click="buy(child, room)">在线预定</u-button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-show="current == 1" class="rich-des">
			<rich-text :nodes="detail.description || '暂无'"></rich-text>
		</view>
		<open-third-map :show="mapShow" :latitude="detail.googleLat" :longitude="detail.googleLon" :name="detail.hotelName" @success="mapShow = false"></open-third-map>
		<u-calendar
			v-model="showCalendar"
			mode="range"
			:active-bg-color="$u.color.warning"
			:range-bg-color="$u.color.warning"
			range-color="#FFFFFF"
			start-text="入店"
			end-text="离店"
			btn-type="warning"
			:min-date="minDate"
			:max-date = "maxDate"
			@change="confirmCalendar"></u-calendar>
	</view>
</template>

<script>
	import kNavbar from '@/components/navbar/index'
	import dataJs from './common/constant.js'
	import openThirdMap from '@/components/map/openThirdMap.vue'
	export default {
		components: {
			kNavbar,
			openThirdMap,
		},
		data() {
			return {
				checkInDateShow: '',
				checkOutDateShow: '',
				dayShow: 0,
				mapShow: false,
				showCalendar: false,
				minDate: '',
				maxDate: '',
				searchData: {},
				detail: {},
				img: '',
				hotelStar: dataJs.hotelStar,
				list: [{
					name: '房型报价'
				}, {
					name: '入驻须知'
				}],
				current: 0,
				roomList: []
			}
		},
		onLoad(option) {
			let nowDate = new Date()
			// 可选择范围 	当日 到90天内
			this.minDate = this.$u.timeFormat(nowDate)
			this.maxDate = this.$u.timeFormat(nowDate.getTime() + 60 * 60 * 24 * 1000 * 90, 'yyyy-mm-dd')
			let date = JSON.parse(option.date);
			this.checkInDateShow = date.checkInDateShow;
			this.checkOutDateShow = date.checkOutDateShow;
			this.dayShow = date.day;
			this.searchData = JSON.parse(option.params);
			this.getInfo()
			this.getHotelRatePlan()
		},
		methods: {
			buy(item,room) {
				console.log('11',room.showPic)
				let params = {
					checkInDateShow: this.checkInDateShow,
					checkOutDateShow: this.checkOutDateShow,
					dayShow: this.dayShow,
					checkInDate: this.searchData.checkInDate,
					checkOutDate: this.searchData.checkOutDate,
					...item,
					showPic: room.showPic,
				}
				uni.navigateTo({
					url: '/pages/hotel/comfirmOrder?params=' + JSON.stringify(params)
				})
			},
			showChild(item) {
				console.log(item)
				item.show = !item.show ;
			},
			changeTab(index) {
				this.current = index;
			},
			openPhone() {
				uni.makePhoneCall({
				    phoneNumber:  this.detail.phone
				});
			},
			getHotelRatePlan() {
				this.$u.api.hotelRatePlan(this.searchData).then(res => {
					if(res.code == 0) {
						this.roomList = res.data.map(item => {
							item.show = false;
							item.showPic = item.pictures.length > 0 ? item.pictures[0].path: ''
							return item
						});
					} else {
						uni.showToast({
							icon:'none',
							title: res.msg
						});
					}
				})
			},
			getInfo() {
				this.$u.api.hotelDetail(this.searchData).then(res => {
					if(res.code == 0) {
						this.detail = res.data;
						this.img = this.detail.pictures ? this.detail.pictures[0].path : '';
					} else {
						uni.showToast({
							icon:'none',
							title: res.msg
						});
					}
				})
			},
			viewImg() {
				// if (this.detail.pictures.length > 0) {
					uni.navigateTo({
						url: '/pages/hotel/imgList?params=' + JSON.stringify(this.detail.pictures)
					})
				// }
			},
			confirmCalendar(e) {
				this.checkInDateShow = `${e.startMonth}月-${e.startDay}日`
				this.checkOutDateShow = `${e.endMonth}月-${e.endDay}日`
				this.searchData.checkInDate = e.startDate;
				this.searchData.checkOutDate = e.endDate;
				this.dayShow = (new Date(this.searchData.checkOutDate).getTime() - new Date(this.searchData.checkInDate).getTime())/(60 * 60 * 24 * 1000)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.hotel-detail {
		.top-img {
			position: relative;
			.num {
				position: absolute;
				bottom: 30rpx;
				right: 30rpx;
				padding: 8rpx 20rpx;
				background-color: rgba(255, 102, 0, .3);
				color: #FFFFFF;
				font-size: 24rpx;
				border-radius: 20rpx;
			}
		}
		.h-name {
			padding: 20rpx 30rpx;
			font-size: 30rpx;
			font-weight: bold;
		}
		.des{
			padding: 0 30rpx;
			color: #808080;
			font-size: 24rpx;
		}
		.phone {
			margin-top: 12rpx;
			padding: 0 30rpx;
			color: #FF6600;
			font-size: 24rpx;
			text-decoration: underline;
		}
		.map-box {
			position: relative;
			margin: 20rpx 30rpx 10rpx 30rpx;
		}
		.adress {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 71rpx;
			color: #000000;
			font-size: 24rpx;
			.u-flex-1 {
				min-width: 0;
			}
		}
		.rich-des {
			
			padding: 30rpx;
		}
		/deep/.u-tab-item {
			border-top: 1rpx solid #E6E6E6;
			border-bottom: 1rpx solid #E6E6E6;
		}
		/deep/.u-tab-bar {
			bottom: -2px;
		}
		.h-list {
			padding: 10rpx 30rpx;
			.date-panle {
				display: flex;
				justify-content: space-around;

			}
			.item {
				text-align: center;
			}
			.date {
				margin-bottom: 4rpx;
				font-size: 28rpx;
				font-weight: bold;
			}
			.des {
				font-size: 24rpx;
				color: #808080;
			}
		}
		.room-list {
			margin-top: 30rpx;
			.r-item {
				// display: flex;
				padding: 20rpx 0;
				border-bottom: 1rpx solid #E6E6E6;
			}
			.u-flex-1 {
				min-width: 0;
			}
			.img-box {
				margin-right: 30rpx;
				width: 110rpx;
				height: 110rpx;
			}
			.name {
				margin-bottom: 20rpx;
				font-size: 28rpx;
				color: #333333;
				font-weight: bold;
			}
			.types {
				font-size: 24rpx;
				color: #333333;
			}
			.price {
				font-size: 32rpx;
				color: #FF6600;
			}
			.or {
				color: #999999;
				text-decoration: line-through;
				font-size: 12px;
			}
		}
		.r-c-item {
			padding: 20rpx 0;
			border-bottom: 1rpx solid #E6E6E6;
			.btn {
				margin-right: 10rpx;
				font-size: 24rpx;
				color: #FF6600;
				border: 1rpx solid #FF6600;
				border-radius: 8rpx;
				padding: 4rpx 10rpx;
				background-color: #FFFFFF;
			}
		}
	}
</style>
